<template>
  <div class="smart-plan-operation-container" v-loading="loading" v-resize-width="handleResize">
    <div class="smart-plan-operation-header">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ activeName }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="lastWeek">{{ $t('common.base.aboutTime.lastDays', {data1: 7}) }}</el-dropdown-item>
          <el-dropdown-item command="lastMonth">{{ $t('common.base.aboutTime.lastDays', {data1: 30}) }}</el-dropdown-item>
          <el-dropdown-item command="thisMonth">{{ $t('common.base.aboutTime.thisMonth1') }}</el-dropdown-item>
          <el-dropdown-item command="thisYear">{{ $t('common.base.aboutTime.thisYear') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    
    <div ref="chart" style="width: 100%; height: 400px;"></div>  
  </div>
</template>  
  
<script>  
import * as echarts5 from 'echarts5';
import _ from 'lodash'
import { formatDate } from 'pub-bbx-utils'
import { t } from '@src/locales'
import { getPlanRunStates } from 'src/modules/smartPlan/api/index.js'
  
export default {  
  name: 'smart-plan-operation',  
  props: {  
    planId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      loading: false,
      chart: null,
      chartData: [],
      activeVal: 'lastWeek',
    }
  },
  computed: {
    activeName() {
      if (this.activeVal == 'lastWeek') return t('common.base.aboutTime.lastDays', {data1: 7})
      if (this.activeVal == 'lastMonth') return t('common.base.aboutTime.lastDays', {data1: 30})
      if (this.activeVal == 'thisMonth') return t('common.base.aboutTime.thisMonth1')
      if (this.activeVal == 'thisYear') return t('common.base.aboutTime.thisYear')
      return t('common.base.aboutTime.lastDays', {data1: 7})
    },
  },
  mounted() {
    this.getChartData()
    window.addEventListener('resize', _.debounce(this.handleResize))
  },
  beforeDestroy() {
    window.removeEventListener('resize', _.debounce(this.handleResize))
  },
  methods: {
    handleCommand(command) {
      this.activeVal = command
      this.getChartData()
    },
    getChartData() {
      this.loading = true
      getPlanRunStates({
        id: this.planId,
        cycle: this.activeVal
      }).then(res => {
        this.chartData = res.data?.chart || []
        this.renderChart()
        this.loading = false
      })
    },
    renderChart() {  
      const data = this.chartData
      this.chart = echarts5.init(this.$refs.chart)
      this.chart.setOption({  
        title: {  
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params)=> {
            const finishRate = data?.[params?.[0].dataIndex]?.finishRate ?? ''
            let result = `${params?.[0]?.name ?? ''}<br>`
            params.forEach(item => result += `${item.marker} ${item.seriesName} ${item.value}</br>`);
            result += `<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#734BC2;'></span> ${this.$t('smartPlan.finishRate')} ${finishRate}`
            return result;
          },
        },
        xAxis: {  
          type: 'category',  
          data: data.map((item) => formatDate(item.executeTime, 'yyyy-MM-dd')), // 根据数据中的日期字段生成x轴数据  
          boundaryGap: false,
          axisTick: {  
            show: false // 不显示X轴刻度线
          },  
        },
        yAxis:{
          name: `${this.$t('smartPlan.createdNum')}/${this.$t('smartPlan.finishNum')}`,
          type: 'value',
          minInterval: 1, // 设置Y轴最小间隔值为1
        },
        series: [  
          {
            name: this.$t('smartPlan.createdNum'),
            data: data.map((item) => item.successCount), // 根据数据中的值字段生成y轴数据  
            type: 'line',
            itemStyle: { color: '#165DFF' },
          },
          {
            name: this.$t('smartPlan.finishNum'),
            data: data.map((item) => item.finishCount), // 完成任务数
            type: 'line',
            itemStyle: { color: '#67c23a' },
          }
        ],
      });
      this.$nextTick(() => {
        this.chart?.resize()
      })
    },
    handleResize() {  
      this.chart?.resize()
    }
  },
};
</script>
<style lang="scss" scoped>
.smart-plan-operation-container {
  padding: 0 20px;
  background: #fff;
}
</style>